<template>
  <div class="no">
    <div class="title-no">{{ title }}</div>
    <el-row :gutter="12">
      <el-col :span="8" v-for="(item, index) in showData" :key="index">
        <div class="sumItem">
          <p style="height: 28px; font-size: 16px">{{ item.title }}</p>
          <p style="height: 22px; font-size: 12px">{{ item.desc }}</p>
          <div>
            <img
              style="width: 80px; height: 80px"
              :src="imgArray[index]"
              alt=""
            />
          </div>
          <div>{{ item.value }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import img1 from "../../assets/images/ship.png";
import img2 from "../../assets/images/icon1.png";
import img3 from "../../assets/images/icon2.png";
const imgArray = [img1, img2, img3];
export default {
  name: "no",
  props: {
    title: {
      default: "标题",
      type: String,
    },
    showData: {
      type: Array,
      default: () => [
        { title: "", desc: "", value: 80 },
        { title: "", desc: "", value: 80 },
        { title: "", desc: "", value: 80 },
      ],
    },
  },
  data() {
    return {
      imgArray,
    };
  },
  mounted() {},
  methods: {
    ClickFun() {},
  },
};
</script>
<style lang="less" scoped>
.el-row {
  .el-col:first-child {
    .sumItem{
      color: #4ddcfe;
    }
      
    
  }
  .el-col:last-child{
    .sumItem {
      color: white;
    }
  }
}
.title-no {
  width: 100%;
  color: white;
  text-align: center;
  margin: 6px 0;
}
.sumItem {
  display: flex;
  justify-content: center;
  color: #ff0000;
  flex-direction: column;
  align-items: center;
  align-content: center;
  padding-top: 12px;
}
.no {
  position: relative;
  height: 100%;
}
</style>